<html>
<head>
<script type="text/javascript" src="./lemon/js/jquery.min.js"></script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}

div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>


<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  $("#box").hide("slow");
  });
});


$(document).ready(function(){
  $("button").click(function(){
  $("div#test").fadeTo("slow",0.25);
  });
});

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});

$(document).ready(function(){
	$("h3#island").click(function(){
		$(this).html("island pass....");
		$(this).append("and turn back...");
	});
});

$(document).ready(function(){
	$("div#test .fade").click(function(){
		$(this).width(200,"slow");
	});
});

</script> 



</head>
 
<body>


<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
 
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button" class="fade">Click to Fade</button>
</div>

<h3 id="island">Island Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Helen Bennett<br /> 
Garden House Crowther Way<br />
London</p>
</div>

<h3>Paris Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br />
Paris</p>
</div>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
 
<p class="flip">Show/Hide Panel</p>

</body>
</html>